﻿@*@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_GiangVienClientLayout.cshtml";
}


@{ Html.RenderPartial("GiangVienClientMenuPartial");}
<div id="main" class="grid_10 gvclientmain">
    <!--  start page-heading -->

    <div id="page-heading" class="box round first grid">
        <h2>Quản lý tài liệu</h2>
        <!-- end page-heading -->
        <div id="gvclientmaincontent" class="block">
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/jquery-ui.css" rel="stylesheet" />
    <link href="~/Content/css/jsTree/themes/default/style.css" rel="stylesheet" />
    <script src="@Url.Content("~/Scripts/jquery-1.8.2.js")"></script>
    <script src="@Url.Content("~/Content/js/jsTree/jquery.jstree.js")"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="~/Scripts/jquery-ui-1.9.1.js"></script>
    <script src="~/Content/js/qlgv/TaiLieu.js"></script>
    <style>
        #folder-tree {
            margin-top: 30px;
            width: 20%;
            float: left;
            height: auto;
        }

        #folder-content {
            width: 65%;
            margin-top: 30px;
            margin-left: 5px;
            margin-right: 5px;
            overflow: hidden;
            float: left;
        }
    </style>
</head>
<body>    
    <div>
        <a id="btnThemThuMuc" name="themThuMuc" style=""display: none;">Tạo thư mục</a>
        <a id="btnThemTaiLieu" name="themTaiLieu" title="Tạo tài liệu">Tạo tài liệu</a>
    </div>
    <div id="folder-tree">
    </div>
    <div id="folder-content">
    </div>
    @{using (Ajax.BeginForm("LayDanhSachTaiLieu", "TaiLieuGiangVien", new AjaxOptions
      {
          HttpMethod = "GET",
          UpdateTargetId = "folder-content"
      }))
      {
              <input type="hidden" id="thuMucHienTai" value="" name="thuMucHienTai" />
                <input type="submit" id="layDanhSachTaiLieu" style="display:none" />
      }
}
    <div id="taoThuMucDialog"></div>
    <div id="taoTaiLieuDialog"></div>
    <div id="chonThuMucDialog">
        <iframe id='chonThuMucIFrame' name='chonThuMucIFrame' src="/TaiLieuGiangVien/GetCayThuMuc">
        </iframe>
    </div>
    <script>
        $(document).ready(function () {
            $("#taoThuMucDialog").load("/TaiLieuGiangVien/TaoThuMuc").dialog({
                autoOpen: false, modal: true, width: 300, height: "auto", title: "Tạo thư mục",
                buttons: {
                    "Thêm": function () {
                        $("#submitTaoThuMuc").click();
                    },
                    "Hủy": function () {
                        $("#taoThuMucDialog").dialog("close");
                    }
                }
            });

            $("#chonThuMucDialog").dialog({
                autoOpen: false, modal: true, width: 400, height: "auto", title: "Chọn thư mục",
                buttons: {
                    "Chọn": function () {
                        var maThuMucDuocChon = window.frames["chonThuMucIFrame"].document.getElementById("thuMucDuocChon").value;
                        $("#MaThuMuc").val(maThuMucDuocChon);
                        $.ajax({
                            url: "/TaiLieuGiangVien/GetDuongDanThuMuc",
                            data: {
                                maThuMuc: maThuMucDuocChon
                            },
                            success: function (data) {
                                $("#DuongDan").val(data.duongDan);
                                $("#chonThuMucDialog").dialog("close");
                            }
                        });
                    },
                    "Hủy": function () {
                        $("#chonThuMucDialog").dialog("close");
                    }
                }
            });

            $("#btnThemThuMuc").button().click(function () {
                $("#taoThuMucDialog").dialog("open");
            });

            $("#btnThemTaiLieu").button().click(function () {
                TaiLieuManager.TaoTaiLieuGiangVien($("#thuMucHienTai").val());
            });

            $("#folder-tree").jstree({
                "plugins": ["themes", "json_data", "ui", "crrm", "contextmenu"],
                "json_data": {
                    "ajax": {
                        "url": "/TaiLieuGiangVien/GetThuMuc",
                        "data": function (n) {
                            return {
                                "maThuMucCha": n.attr ? n.attr("id") : null
                            };
                        }
                    }
                },
                "contextmenu": {
                    "items": function ($node) {
                        return {
                            "create": {
                                "label": "Tạo thư mục",
                                "action": function (obj) {
                                    this.create(obj);
                                }
                            },
                            "rename": {
                                "label": "Đổi tên",
                                "action": function (obj) { this.rename(obj); }
                            },
                            "delete": {
                                "label": "Xóa",
                                "action": function (obj) {
                                    if (confirm("Xóa thư mục này?"))
                                        this.remove(obj);
                                }
                            },
                            "addDoc": {
                                "label": "Thêm tài liệu",
                                "action": function (obj) {
                                    var maThuMuc = obj[0].id;
                                    TaiLieuManager.TaoTaiLieu(maThuMuc);
                                }
                            }
                        };
                    }
                }
            });
            $("#folder-tree").bind("select_node.jstree", function (NODE, REF_NODE) {
                var a = $.jstree._focused().get_selected();
                $("#thuMucHienTai").val(a.attr("id"));
                $("#layDanhSachTaiLieu").click();
            });
            $("#folder-tree").bind("rename_node.jstree", function (event, data) {
                var id = $(data.rslt.obj).attr("id");
                var tenThuMuc = data.rslt.name;
                $.ajax({
                    type: "POST",
                    url: "/TaiLieuGiangVien/DoiTenThuMuc",
                    data: {
                        maThuMuc: id,
                        tenThuMuc: tenThuMuc
                    },
                    success: function () {
                    }
                });
            });

            $("#folder-tree").bind("remove.jstree", function (event, data) {
                var id = $(data.rslt.obj).attr("id");
                $.ajax({
                    type: "POST",
                    url: "/TaiLieuGiangVien/XoaThuMuc",
                    data: {
                        maThuMuc: id
                    },
                    success: function (data) {
                        if (data.success == false) {
                            $("#folder-tree").jstree("refresh");
                            alert(data.message);
                        }
                    }
                });
            });

            $("#folder-tree").bind("addDoc.jstree", function (event, data) {
                alert("addDoc");
            });

            $("#folder-tree").bind("create.jstree", function (event, data) {
                var tenThuMuc = data.rslt.name;
                var maThuMucCha = $(data.rslt.obj).parent().parent().attr("id");
                $.ajax({
                    type: "POST",
                    url: "/TaiLieuGiangVien/TaoThuMuc",
                    data: {
                        TenThuMuc: tenThuMuc,
                        MaThuMucCha: maThuMucCha
                    },
                    success: function (data) {
                        if (data.success == false) {
                            $("#folder-tree").jstree("refresh");
                            alert(data.message);
                        }
                    }
                });
            });
        });

        function TaoThuMucThanhCong(data) {
            if (data.success == true) {
                $("#taoThuMucDialog").dialog("close");
                $("#folder-tree").jstree("refresh");
            }
        }

        function TaoTaiLieuThanhCong(data) {
            if (data.success == true) {
                $("#taoTaiLieuDialog").dialog("close");
                $("#folder-tree").jstree("refresh");
                $("layDanhSachTaiLieu").click();
            }
        }
    </script>
</body>
</html>*@

@{
    Layout = "~/Views/Shared/_GiangVienClientLayout.cshtml";
}

<link href="~/Content/css/jsTree/themes/default/style.css" rel="stylesheet" />
<script src="@Url.Content("~/Content/js/jsTree/jquery.jstree.js")"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Content/js/qlgv/TaiLieu.js"></script>
<style>
    .block {
        overflow: hidden;
    }

    #folder-tree {
        width: 100%;
        float: left;
        height: 400px;
        overflow-y: auto;
        background-color: #fff !important;
    }

    #folder-content {
        width: 100%;
        margin-left: 5px;
        margin-right: 5px;
        overflow: hidden;
        float: left;
    }

    div.menu-title {
        margin-top: 20px;
        background: none repeat scroll 0 0 #E6F0F3;
        border-bottom: 1px solid #B3CBD6;
        border-radius: 5px 5px 0 0;
        color: #1B548D;
        font-size: 1.2em;
        font-weight: bold;
        padding: 8px 12px;
    }
</style>

<div class="grid_3">
    <div class="menu-title">
        <span>Cây thư mục</span>
    </div>
    <div id="folder-tree">
    </div>
</div>

<div class="grid_9">
    <div class="box round first grid">
        <h2>Nội dung thư mục</h2>
        <div class="block">
            <div>
                <div id="folder-content"></div>
                @{using (Ajax.BeginForm("LayDanhSachTaiLieu", "TaiLieu", new AjaxOptions
          {
              HttpMethod = "GET",
              UpdateTargetId = "folder-content"
          }))
                  {
                    <input type="hidden" id="thuMucHienTai" value="" name="thuMucHienTai" />
                    <input type="submit" id="layDanhSachTaiLieu" style="display: none" />
                  }
                }
                <div id="taoThuMucDialog"></div>
                <div id="taoTaiLieuDialog"></div>
                <div id="chonThuMucDialog">
                    <iframe id='chonThuMucIFrame' name='chonThuMucIFrame' src="/TaiLieu/GetCayThuMuc"></iframe>
                </div>
            </div>
        </div>

    </div>
</div>
<script>
    $(document).ready(function () {
        $("#taoThuMucDialog").load("/TaiLieu/TaoThuMuc").dialog({
            autoOpen: false, modal: true, width: 300, height: "auto", title: "Tạo thư mục",
            buttons: {
                "Thêm": function () {
                    $("#submitTaoThuMuc").click();
                },
                "Hủy": function () {
                    $("#taoThuMucDialog").dialog("close");
                }
            }
        });

        $("#chonThuMucDialog").dialog({
            autoOpen: false, modal: true, width: 400, height: "auto", title: "Chọn thư mục",
            buttons: {
                "Chọn": function () {
                    var maThuMucDuocChon = window.frames["chonThuMucIFrame"].document.getElementById("thuMucDuocChon").value;
                    $("#MaThuMuc").val(maThuMucDuocChon);
                    $.ajax({
                        url: "/TaiLieu/GetDuongDanThuMuc",
                        data: {
                            maThuMuc: maThuMucDuocChon
                        },
                        success: function (data) {
                            $("#DuongDan").val(data.duongDan);
                            $("#chonThuMucDialog").dialog("close");
                        }
                    });
                },
                "Hủy": function () {
                    $("#chonThuMucDialog").dialog("close");
                }
            }
        });

        $("#btnThemThuMuc").button().click(function () {
            $("#taoThuMucDialog").dialog("open");
        });

        $("#btnThemTaiLieu").button().click(function () {
            TaiLieuManager.TaoTaiLieu($("#thuMucHienTai").val());
        });

        $("#folder-tree").jstree({
            "plugins": ["themes", "json_data", "ui", "crrm", "contextmenu"],
            "json_data": {
                "ajax": {
                    "url": "/TaiLieuGiangVien/GetThuMuc",
                    "data": function (n) {
                        return {
                            "maThuMucCha": n.attr ? n.attr("id") : null
                        };
                    }
                }
            },
            "contextmenu": {
                "items": function ($node) {
                    return {
                        "create": {
                            "label": "Tạo thư mục",
                            "action": function (obj) {
                                this.create(obj);
                            }
                        },
                        "rename": {
                            "label": "Đổi tên",
                            "action": function (obj) { this.rename(obj); }
                        },
                        "delete": {
                            "label": "Xóa",
                            "action": function (obj) {
                                if (confirm("Xóa thư mục này?"))
                                    this.remove(obj);
                            }
                        },
                        "addDoc": {
                            "label": "Thêm tài liệu",
                            "action": function (obj) {
                                var maThuMuc = obj[0].id;
                                TaiLieuManager.TaoTaiLieu(maThuMuc);
                            }
                        }
                    };
                }
            }
        });
        $("#folder-tree").bind("select_node.jstree", function (NODE, REF_NODE) {
            var a = $.jstree._focused().get_selected();
            $("#thuMucHienTai").val(a.attr("id"));
            $("#layDanhSachTaiLieu").click();
        });
        $("#folder-tree").bind("rename_node.jstree", function (event, data) {
            var id = $(data.rslt.obj).attr("id");
            var tenThuMuc = data.rslt.name;
            $.ajax({
                type: "POST",
                url: "/TaiLieu/DoiTenThuMuc",
                data: {
                    maThuMuc: id,
                    tenThuMuc: tenThuMuc
                },
                success: function () {
                }
            });
        });

        $("#folder-tree").bind("remove.jstree", function (event, data) {
            var id = $(data.rslt.obj).attr("id");
            $.ajax({
                type: "POST",
                url: "/TaiLieu/XoaThuMuc",
                data: {
                    maThuMuc: id
                },
                success: function (data) {
                    if (data.success == false) {
                        $("#folder-tree").jstree("refresh");
                        ToastManager.showStickyWarningToast(data.message);
                    }
                    else {
                        ToastManager.showSuccessToast("Tạo thư mục thành công");
                    }
                }
            });
        });

        $("#folder-tree").bind("create.jstree", function (event, data) {
            var tenThuMuc = data.rslt.name;
            var maThuMucCha = $(data.rslt.obj).parent().parent().attr("id");
            $.ajax({
                type: "POST",
                url: "/TaiLieu/TaoThuMuc",
                data: {
                    TenThuMuc: tenThuMuc,
                    MaThuMucCha: maThuMucCha
                },
                success: function (data) {
                    if (data.success == false) {
                        $("#folder-tree").jstree("refresh");
                        ToastManager.showStickyWarningToast(data.message);
                    }
                    else {
                        ToastManager.showSuccessToast("Tạo thư mục thành công");
                    }
                }
            });
        });
    });

    function TaoThuMucThanhCong(data) {
        if (data.success == true) {
            $("#taoThuMucDialog").dialog("close");
            $("#folder-tree").jstree("refresh");
        }
    }

    function TaoTaiLieuThanhCong(data) {
        if (data.success == true) {
            $("#taoTaiLieuDialog").dialog("close");
            $("#folder-tree").jstree("refresh");
            $("layDanhSachTaiLieu").click();
            ToastManager.showSuccessToast("Tạo/Cập nhật tài liệu thành công.");
        }
        else {
            ToastManager.showStickyWarningToast(data.message);
        }
    }
</script>

